﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

    <title>医院后台管理</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../static/assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../static/assets/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../static/assets/css/style.css">
    <!--[if lt IE 9]>
    <script src="../static/assets/js/html5shiv.min.js"></script>
    <script src="../static/assets/js/respond.min.js"></script>
    <script src="../static/assets/js/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <![endif]-->
</head>

<body>
<div class="main-wrapper">
    <div class="header">
        <div class="header-left">
            <a href="guahao.html" class="logo">
                <img src="../static/assets/img/logo.png" width="35" height="35" alt=""> <span>挂号</span>
            </a>
        </div>
        <a id="mobile_btn" class="mobile_btn float-left" href="#sidebar"><i class="fa fa-bars"></i></a>
        <ul class="nav user-menu float-right">
            <li class="nav-item dropdown d-none d-sm-block">
                <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown"><i class="fa fa-bell-o"></i> <span
                        class="badge badge-pill bg-danger float-right">3</span></a>
            </li>
            <li class="nav-item dropdown d-none d-sm-block">
                <a href="javascript:void(0);" id="open_msg_box" class="hasnotifications nav-link"><i
                        class="fa fa-comment-o"></i> <span class="badge badge-pill bg-danger float-right">8</span></a>
            </li>
            <li class="nav-item dropdown has-arrow">
                <a href="#" class="dropdown-toggle nav-link user-link" data-toggle="dropdown">
                        <span class="user-img">
							<img class="rounded-circle" src="../static/assets/img/user.jpg" width="24" alt="Admin">
							<span class="status online"></span>
						</span>
                    <span th:if="${userName}" th:text="${userName}"></span>
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="profile.html">修改个人信息</a>
                    <a class="dropdown-item" href="/loginout">退出</a>
                </div>
            </li>
        </ul>
        <div class="dropdown mobile-user-menu float-right">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i
                    class="fa fa-ellipsis-v"></i></a>
        </div>
    </div>
    <div class="sidebar" id="sidebar">
        <div class="sidebar-inner slimscroll">
            <div id="sidebar-menu" class="sidebar-menu">
                <ul>
                    <li class="menu-title">操作列表</li>

                    <li>
                        <a href="#"><i class="fa fa-user-md"></i> <span>医生信息</span></a>
                    </li>

                    <li>
                        <a href="javascript:;" id="chatBtn"><i class="fa fa-comments"></i> <span>聊天</span></a>
                    </li>

                </ul>
            </div>
        </div>
    </div>
    <div class="page-wrapper" id="allContentDiv">
        <canvas id="bargraph"></canvas>
        <canvas id="linegraph"></canvas>

<!--        内容区-->

        <div class="content">
            <div class="row">
                <div class="col-sm-12">
                    <h4 class="page-title">挂号页面</h4>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="card-box">
                        <h4 class="card-title">患者信息录入</h4>
<!--                        表单-->
                        <form action="addRegistrationInfo" method="post">
                            <div class="form-group row">
                                <label class="col-form-label col-md-2">患者姓名</label>
                                <div class="col-md-10">
                                    <input id="registrationName" type="text" class="form-control" name="registrationName">
                                </div>
                            </div>

                            <!--                            一级分科(内科,外科)-->
                            <div class="form-group row">
                                <label class="col-form-label col-md-2">一级分科</label>
                                <div class="col-md-10">
                                    <select id="depart" class="form-control" name="depart">
                                        <option>请选择</option>
                                        <option>内科</option>
                                        <option>外科</option>
                                    </select>
                                </div>
                            </div>

<!--                            二级科室(下面的子科室)-->
                            <div class="form-group row">
                                <label class="col-form-label col-md-2">科室</label>
                                <div class="col-md-10">
                                    <select id="childDepart" class="form-control" name="registrationSectionId">
                                        <option>请选择</option>
                                    </select>
                                </div>
                            </div>

<!--                           根据挂号级别来显示对应的医生 -->
                            <div class="form-group row">
                                <label class="col-form-label col-md-2">对应的医生</label>
                                <div class="col-md-10">
                                    <select id="doctor" class="form-control" name="registrationDocterId">
                                        <option>请选择</option>
                                    </select>
                                </div>
                            </div>

<!--                            挂号费用-->
                            <div class="form-group row">
                                <label class="col-form-label col-md-2">挂号费用</label>
                                <div class="col-md-10">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">$</span>
                                        </div>
                                        <!--                            处理人id-->
                                        <input type="hidden" name="handleId" th:value="${docterId}">
                                        <input id="price" class="form-control" type="text" name="regPrice">
                                        <div class="input-group-append">
<!--                                            <input id="nowtime" class="form-control" type="hidden" name="regTime" value="">-->
                                            <input id="nowtime" type="hidden" name="registrationTime" value="">
                                            <button id="tijiao" class="btn btn-primary" type="button">提交</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page-wrapper" id="chatBox">
        <div class="chat-main-row">
            <div class="chat-main-wrapper">
                <div class="col-lg-9 message-view chat-view">
                    <div class="chat-window">
                        <div class="chat-contents">

                        </div>
                        <div class="chat-footer">
                            <div class="message-bar">
                                <div class="message-inner">
                                    <a class="link attach-icon" href="#" data-toggle="modal"
                                       data-target="#drag_files"><img src="static/assets/img/attachment.png" alt=""></a>
                                    <div class="message-area">
                                        <div class="input-group">
                                            <textarea class="form-control" placeholder="Type message..."
                                                      v-model="inputContent"></textarea>
                                            <span class="input-group-append">
													<button class="btn btn-primary" type="button"
                                                            @click="sentInputMessage"><i
                                                            class="fa fa-send"></i></button>
												</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 message-view chat-profile-view chat-sidebar" id="chat_sidebar">
                    <div class="chat-window video-window">
                        <div class="tab-content chat-contents">
                            <div class="content-full tab-pane" id="calls_tab">
                                <div class="chat-wrap-inner">
                                    <div class="chat-box">
                                        <div class="chats">
                                            <div class="chat chat-left">
                                                <div class="chat-avatar">
                                                    <a href="profile.html" class="avatar">
                                                        <img alt="Cristina Groves"
                                                             src="static/assets/img/doctor-thumb-03.jpg"
                                                             class="img-fluid rounded-circle">
                                                    </a>
                                                </div>
                                                <div class="chat-body">
                                                    <div class="chat-bubble">
                                                        <div class="chat-content">
                                                            <span class="chat-user">You</span> <span class="chat-time">8:35 am</span>
                                                            <div class="call-details">
                                                                <i class="material-icons">phone_missed</i>
                                                                <div class="call-info">
                                                                    <div class="call-user-details">
                                                                        <span class="call-description">Jeffrey Warden missed the call</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="chat chat-left">
                                                <div class="chat-avatar">
                                                    <a href="profile.html" class="avatar">
                                                        <img alt="Jennifer Robinson"
                                                             src="static/assets/img/patient-thumb-02.jpg"
                                                             class="img-fluid rounded-circle">
                                                    </a>
                                                </div>
                                                <div class="chat-body">
                                                    <div class="chat-bubble">
                                                        <div class="chat-content">
                                                            <span class="chat-user">Jennifer Robinson</span> <span
                                                                class="chat-time">8:35 am</span>
                                                            <div class="call-details">
                                                                <i class="material-icons">call_end</i>
                                                                <div class="call-info">
                                                                    <div class="call-user-details"><span
                                                                            class="call-description">This call has ended</span>
                                                                    </div>
                                                                    <div class="call-timing">Duration: <strong>5 min 57
                                                                        sec</strong></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="chat-line">
                                                <span class="chat-date">January 29th, 2015</span>
                                            </div>
                                            <div class="chat chat-left">
                                                <div class="chat-avatar">
                                                    <a href="profile.html" class="avatar">
                                                        <img alt="Cristina Groves"
                                                             src="static/assets/img/doctor-thumb-03.jpg"
                                                             class="img-fluid rounded-circle">
                                                    </a>
                                                </div>
                                                <div class="chat-body">
                                                    <div class="chat-bubble">
                                                        <div class="chat-content">
                                                            <span class="chat-user">You</span> <span class="chat-time">8:35 am</span>
                                                            <div class="call-details">
                                                                <i class="material-icons">ring_volume</i>
                                                                <div class="call-info">
                                                                    <div class="call-user-details">
                                                                        <a href="#"
                                                                           class="call-description call-description--linked"
                                                                           data-qa="call_attachment_link">Calling
                                                                            Jennifer ...</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="content-full tab-pane show active" id="profile_tab">
                                <div class="display-table">
                                    <div class="table-row">
                                        <div class="table-body">
                                            <div class="table-content">
                                                <h3>选择聊天部门</h3>
                                                <div>
                                                    <input type='button' class='btn btn-primary' value="门诊部"
                                                           @click="getCallAction(9005)"/>
                                                    <input type='button' class='btn btn-primary' value="财务部"
                                                           @click="getCallAction(9003)"/>
                                                    <input type='button' class='btn btn-primary' value="护士部"
                                                           @click="getCallAction(9004)"/>
                                                    <input type='button' class='btn btn-primary' value="手术部"
                                                           @click="getCallAction(9001)"/>
                                                </div>
                                                <div style="margin-top: 10px">
                                                    <input type='button' class='btn btn-primary' value="住院部"
                                                           @click="getCallAction(9006)"/>
                                                </div>
                                                <div style="margin-top: 510px">
                                                    <input type='button' class='btn btn-primary closeCallBox'
                                                           value="关闭聊天"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<div class="sidebar-overlay" data-reff=""></div>
<script src="../static/assets/js/jquery-3.2.1.min.js"></script>
<script src="../static/assets/js/popper.min.js"></script>
<script src="../static/assets/js/bootstrap.min.js"></script>
<script src="../static/assets/js/jquery.slimscroll.js"></script>
<script src="../static/assets/js/Chart.bundle.js"></script>
<script src="../static/assets/js/chart.js"></script>
<script src="../static/assets/js/app.js"></script>
<script src="static/vue.js"></script>

<script>
    //这是页面通信的vue
    var app = new Vue({
        el: ".main-wrapper",
        created() { // 页面创建生命周期函数
            this.initWebSocket();
        },
        destroyed: function () { // 离开页面生命周期函数
            this.websocketclose();
        },
        data: {
            callAction: "",
            inputContent: ""
        },
        methods: {
            initWebSocket: function () {
                // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
                this.websock = new WebSocket("ws://192.168.50.74:8080/websocket/{9002}");
                this.websock.onopen = this.websocketonopen;
                this.websock.onerror = this.websocketonerror;
                this.websock.onmessage = this.websocketonmessage;
                this.websock.onclose = this.websocketclose;
            },
            websocketonopen: function () {
                console.log("WebSocket连接成功");
            },
            websocketonerror: function (e) {
                console.log("WebSocket连接发生错误");
            },
            websocketonmessage: function (e) {
                var showInfo = $("<h1>").text(e.data);
                $(".chat-contents").append(showInfo);
                $("#allContentDiv").hide(200);
                $("#chatBox").show(200);
            },
            websocketclose: function (e) {
                console.log("connection closed (" + e.code + ")");
            },
            sendInfo: function (shipId, message) {
                // 这里只是一个基于axios的ajax请求，你可以换成你的请求格式
                $.ajax({
                    type: "post",
                    url: "test",
                    data: {"shipId": shipId, "message": message},
                    async: true,
                    success: function () {
                    }
                });
            },
            getCallAction: function (e) {
                console.log(e);
                this.callAction = e;
            },
            sentInputMessage: function () {
                var messageContent = this.inputContent;
                var calltarget = this.callAction;
                if (calltarget.length < 1) {
                    layer.alert("请选者部门", {icon: 5});
                } else if (messageContent.length < 1) {
                    layer.alert("请输入消息", {icon: 5});
                } else {
                    messageContent = "来自挂号部的消息-->" + messageContent;
                    this.sendInfo(calltarget, messageContent);
                    this.inputContent = "";
                }
            }
        }
    });
    //隐藏那两个柱状图
    $("canvas").hide();
    $("#chatBox").hide();

    //这是打开聊天窗口的方法
    $("#chatBtn").click(function () {
        $("#allContentDiv").hide(200);
        $("#chatBox").show(200);
    });
    //这是关闭聊天窗口的方法
    $(".closeCallBox").click(function () {
        $("#allContentDiv").show(200);
        $("#chatBox").hide(200);
    });
<!--    根据一级科室获取到二级科室的名字-->
    $("#depart").change(function(){
    //    获取到当前输入框中的一级科室的名字
        var val = $(this).val();
        //在查询的时候删除childDepart下的所有的子option
        $("#childDepart").children("#child_depart_option").remove();
        $.ajax({
            async:true,
            type:"POST",
            url:"findSectionInfo",
            data:{"sectionType":val},
            datatype:"json",
            success:function (data) {
                console.log(data);
                //根据拿到的一级科室对象拿到对应的二级科室的名字
                for (var i=0;i<data.length;i++){
                    $("#childDepart").append(`<option id='child_depart_option' value=${data[i].sectionId}>${data[i].sectionName}</option>`);
                }
            }
        });
    });

//根据二级科室拿到对应的医生
    $("#childDepart").change(function(){
        //    获取到当前输入框中的二级科室的id
        var val = $(this).val();
        console.log(val);
        //在查询的时候删除childDepart下的所有的子option
        $("#doctor").children("#opc").remove();
        $.ajax({
            async:true,
            type:"POST",
            url:"getDoctor",
            data:{"sectionId":val},
            datatype:"json",
            success:function (data) {
                console.log(data);
                //根据拿到的一级科室对象拿到对应的二级科室的名字
                for (var i=0;i<data.length;i++){
                    $("#doctor").append(`<option id='opc' value=${data[i].doctorId}>${data[i].doctorName}</option>`);
                }
            }
        });
    });

<!--    获取当前提交的时间-->
    $("#tijiao").click(function(){
        var date = new Date();
        $("#nowtime").val(date);
    //    判断所有的值是否为空
    //    患者姓名
        var registrationName = $("#registrationName").val();
        console.log(registrationName)
        console.log("患者姓名为:"+registrationName);
        //预约科室id
        var depart = $("#childDepart").val();
        console.log("科室id:"+depart);
    //    预约医生id
        var doctor = $("#doctor").val();
        console.log("医生id"+doctor)
        //预约科室id
        $
        //费用
        var price = $("#price").val();
        if(registrationName!=null&&registrationName!=""&&doctor!=""&&doctor!= null&&doctor!="请选择"){
            console.log("填写完毕");
            $(this).attr("type","submit")
            // $(this).submit();
        }else{
            alert("请填写完毕在提交");
        }
    });

</script>

</body>

</html>